<template>
  <div class="nurse-wrapper">
    <div class="nurse-wrapper_contact">
      <div class="contact">
        <div class="contact_title">
          在线预约
          <div class="line"></div>
        </div>
        <div class="contact_phone">
          <input type="text" placeholder="电话" />
        </div>
        <div class="contact_code">
          <input type="text" placeholder="验证码" />
        </div>
        <div class="contact_btn">
          <el-button type="danger">提交预约</el-button>
        </div>
        <div class="contact_tip">
          提交成功后，工作人员会第一时间与您取得联系。<br /><br />
          工作时间：周一至周日；8:00-18:00<br /><br /><br />
          提示：验证码功能需单独购买短信资源包。
        </div>
      </div>
    </div>
    <div class="nurse-wrapper_process nurse-wrapper_card">
      <div class="title">服务流程</div>
      <div class="content">
        <div class="content-item">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9lMDA4NWQ1N2JhNGU3YTUyODM0ZTA2NGNlYmFmZmRiYS05MC53ZWJw.webp"
            alt=""
          />
          <div>在线预约</div>
          <div>在线填写您的手机号和所在城市</div>
        </div>
        <div class="content-item">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9mNDUyZjA0YTQ0M2JiZWI4MzUyNDEwNmI4OTAwNWY3OS05MC53ZWJw.webp"
            alt=""
          />
          <div>专属客服联系</div>
          <div>专属客服为您匹配保姆</div>
        </div>
        <div class="content-item">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS85NzcwMDJjNzAyZmFiYTBhNWY1YmMyZjc2ZTY5NzgzOC05MC53ZWJw.webp"
            alt=""
          />
          <div>预约面试</div>
          <div>根据您的时间灵活预约面试</div>
        </div>
        <div class="content-item">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS8xZjU1OWMwZTI1YjA3NDEzYTRiYzk5Nzc0NDgyMDgyNC05MC53ZWJw.webp"
            alt=""
          />
          <div>签订合同</div>
          <div>签订三方合约，免费赠送保险</div>
        </div>
      </div>
    </div>
    <div class="nurse-wrapper_process nurse-wrapper_card">
      <div class="title">服务内容</div>
      <div class="content">
        <div class="content-item substance">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC81Y2U4MTFkNTY1NzE2MzliNTE1MDllMWNkZjljMGI4NS0xNTB4MTUwLTkwLndlYnA_p_p100_p_3D.webp"
            alt=""
          />
          <div>
            <p class="substance-name">日常保洁</p>
            <p class="substance-desc">服务提供家庭日常保洁</p>
          </div>
          <div>
            <p>打扫卫生：卧室，客厅，卫生间，厨房</p>
            <p>家具清洁：沙发、冰箱、洗衣机、灶台、油烟机等</p>
          </div>
        </div>
        <div class="content-item substance">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9iOGU3ODQzMjAxNGJhZWUwNjAzZWExNWIxZWEyMDQyMi0xNTB4MTUwLTkwLndlYnA_p_p100_p_3D.webp"
            alt=""
          />
          <div>
            <p class="substance-name">照顾老人</p>
            <p class="substance-desc">
              协助帮忙照顾自理半自理， 完全不能自理老人
            </p>
          </div>
          <div>
            <p>陪护：看病取药，散步，购物</p>
            <p>照顾：提醒按医嘱吃药，照顾起居</p>
          </div>
        </div>
        <div class="content-item substance">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC85NGZlYzIzZDRiOTQxNDNjOWYzNWNiOGNlNmRiN2JlYi0xNTB4MTUwLTkwLndlYnA_p_p100_p_3D.webp"
            alt=""
          />
          <div>
            <p class="substance-name">衣物洗涤熨烫</p>
            <p class="substance-desc">提供衣服护理服务</p>
          </div>
          <div>
            <p>衣物清洗：手洗，机洗</p>
            <p>熨烫衣物：普通熨烫，蒸汽喷雾熨烫</p>
          </div>
        </div>
      </div>
    </div>
    <div class="nurse-wrapper_process nurse-wrapper_card">
      <div class="title">服务类型</div>
      <div class="content">
        <div class="content-item type">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC84NWY5NjQxZGIyMzE5MGNiNzEzNGM5YTU5ZGQ1ZWY2NC05MC53ZWJw.webp"
            alt=""
          />
          <div>住家保姆</div>
          <div>全天24小时住家服务，时刻准备着</div>
        </div>
        <div class="content-item type">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC82MGFmY2JmOWUzNmM5ODdkODFlMDY5OTBlMjNiOTVlNi05MC53ZWJw.webp"
            alt=""
          />
          <div>白班保姆</div>
          <div>提供白天不住家服务，服务依旧贴心</div>
        </div>
        <div class="content-item type">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9jMGRiNjQyMTVjOTg0YmJjMjU1ZjI3ZjBiMzI3MmQ1MS05MC53ZWJw.webp"
            alt=""
          />
          <div>钟点工</div>
          <div>按您需求时长提供服务，灵活预约更方便</div>
        </div>
        <div class="content-item type">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC80ZDYyODZkMWU5OTI3MjU3ZDg4Y2E2NDg5OGVmZjVjZi05MC53ZWJw.webp"
            alt=""
          />
          <div>菲佣保姆</div>
          <div>专业持证上岗，服务更安心</div>
        </div>
      </div>
    </div>
    <div class="footer nurse-wrapper_card">
      <div class="content">
        <div class="content-item ad">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9jZjQxNjFkMDM4YjNiOTMzODFkZWY3YzRlNmNmNTNkOC04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
          <div class="title">专业</div>
          <div>标准化培训 严格甄选 专业设备</div>
        </div>
        <div class="content-item ad">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9iN2RkNGQ3MzA5MDQ5ZDQ2MzJjNTIxMmY4YjZhNWJiMC04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
          <div class="title">安全</div>
          <div>实名认证 背景调查 安全放心</div>
        </div>
        <div class="content-item ad">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC82YjQ0YjQ3Y2JlOTVmYmY1NDAzNDZkYjg1ZGEzNGVlMS04MHg4MC05MC53ZWJw.webp"
            alt=""
          />
          <div class="title">便捷</div>
          <div>服务人员全城高密度覆盖 上门准时</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.nurse-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  &_contact {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 1280px;
    height: 474px;
    margin: 40px 0;
    background: url("https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9jMTk2ZjVjZTkxYTViYjRjYzBhMTAwMzc5OGY1YTVjNy05MC53ZWJw.webp")
      center/cover;
    .contact {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 450px;
      height: 434px;
      font-size: 18px;
      box-shadow: 0px 0px 5px #ccc;
      line-height: 40px;
      &_title {
        .line {
          margin: 0 auto;
          width: 40px;
          height: 2px;
          background-color: #e6454a;
        }
      }
      &_phone,
      &_code {
        input {
          width: 350px;
          line-height: 40px;
          margin-top: 20px;
          color: #333;
          caret-color: #333;
          border: none;
          border-bottom: 1px solid rgb(207, 207, 207);
        }
      }
      &_code {
      }
      &_btn {
        margin: 20px 0;
        /deep/ .el-button {
          width: 180px;
          height: 40px;
          background: #e6454a;
        }
      }
      &_tip {
        width: 350px;
        line-height: 16px;
        font-size: 12px;
        color: #666;
      }
    }
  }
  &_card {
    width: 1280px;
    margin-top: 40px;
    .title {
      line-height: 60px;
      font-size: 20px;
      color: #333;
    }
    .content {
      display: flex;
      .content-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 180px;
        flex: 1;
      }
      .substance {
        height: 289px;
        p {
          text-align: center;
          line-height: 20px;
          color: #444;
        }
        .substance-desc {
          font-size: 12px;
          color: #999999;
        }
        .substance-name {
          font-size: 17px;
          color: #e6454a;
        }
      }
      .type {
        height: 216px;
      }
    }
  }
  .footer {
    width: 100%;
    height: 355px;
    background-color: #fbfbfb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .content {
      width: 1280px;
    }
    .ad {
      .title {
        font-size: 28px;
      }
    }
  }
}
</style>